<!-- 「我的团队」页面-无团队状态 -->
<template>
  <div class="container">
    <!-- 背景层 -->
    <div class="page-bg">
      <image
        src="https://ustatic.hudongmiao.com/miao/activity/inv-bg.png"
        class="db"
      ></image>
      <image
        src="https://ustatic.joymew.com/%20miao/ywq/attend-tit.png"
        class="create-team_title"
      ></image>
    </div>
    <!-- 内容层 -->
    <div class="page-ct">
      <!-- 规则和奖励按钮 -->
      <div class="rule-btn" @click="rulesPopup?.open">规则</div>
      <div class="reward-btn" @click="rewardPopup?.open">奖励</div>
      <!-- 邀请前 -->
      <div class="invite-before">
        <div class="invite-intro_box">
          <div class="title">邀好友组队，赢万元奖金</div>
          <div class="tip-box">团队获得奖励后，奖励发放至团长帐号</div>
        </div>
        <div class="tobe-member_list">
          <div class="member-item" v-for="item in 4" :key="item">
            <div class="member-avatar">+</div>
            <span class="member-name">待邀请</span>
          </div>
        </div>
        <div class="create-team_btn"  @click="createTeamPopup?.open">
          <image
            src="https://ustatic.joymew.com/%20miao/ywq/add-plus.png"
            class="add-icon"
          ></image>
          创建团队
        </div>
      </div>
      <!-- 邀请后 -->
      <div class="invite-after">
        <div class="after-tit">-加入战队后-</div>
        <div class="task-list">
          <div
            class="list-item_card"
            v-for="(item, index) in taskList"
            :key="index"
          >
            <div class="left">
              <image :src="item.icon" class="task-icon"></image>
              <div class="left-ct">
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.desc }}</div>
              </div>
            </div>
            <div class="attend-btn" @click="createTeamPopup?.open">立即参与</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <CreateTeamPopup ref="createTeamPopup" @confirm="onCreateTeamConfirm" />

  <RulesPopup
    ref="rulesPopup"
    :rule-key="ACTIVITY_RULE_KEY.ACTIVITY_202406"
    :title-img="IMG_URL.RULE_TITLE"
  />
  <TeamCompetitionRewardsPopup ref="rewardPopup" />
</template>

<script setup lang="ts">
import RulesPopup from "@/components/activity-202405/RulesPopup.vue";
import TeamCompetitionRewardsPopup from "@/components/activity-202405/TeamCompetitionRewardsPopup.vue";
import CreateTeamPopup from "@/components/CreateTeamPopup.vue";
import { IMG_URL } from "@/static/constant/activity-202405-constant";
import { ACTIVITY_RULE_KEY } from "@/static/constant/view-constant";
import { onCreateTeamConfirm } from "@/utils/activity-202310-utils";

const createTeamPopup = ref<InstanceType<typeof CreateTeamPopup>>();

const rulesPopup = ref<InstanceType<typeof RulesPopup>>();

const rewardPopup = ref<InstanceType<typeof TeamCompetitionRewardsPopup>>();

const taskList = ref([
  {
    icon: "https://ustatic.hudongmiao.com/miao/activity/coin.png",
    title: "每日签到领积分",
    desc: "登录嗨喵主持人小程序、嗨喵APP",
  },
  {
    icon: "https://ustatic.hudongmiao.com/miao/activity/gift.png",
    title: "8人成团赢比赛",
    desc: "最多可8人成团赢积分",
  },
  {
    icon: "https://ustatic.hudongmiao.com/joymew-host-contest/activity-202405/team-competition-reward-2.png",
    title: "多玩红包口袋类游戏",
    desc: "红包雨，开宝箱等小游戏",
  },
]);
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  position: relative;
  .page-bg {
    width: 100%;
    height: 100%;
    background-color: #fdbf6e;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .db {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1020rpx;
    }
    .create-team_title {
      width: 488rpx;
      height: 119rpx;
      position: absolute;
      top: 43rpx;
    }
  }
  .page-ct {
    padding-top: 800rpx;
    padding-bottom: 100rpx;
    position: relative;
    .rule-btn,
    .reward-btn {
      position: absolute;
      z-index: 1;
      top: 97px;
      right: 12px;

      width: 30px;
      height: 30px;

      background-color: rgb(0 0 0 / 60%);
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 11px;
      color: #fff;
    }

    .reward-btn {
      top: 143px;
    }
    .invite-before {
      width: 712rpx;
      height: 565rpx;
      background: linear-gradient(180deg, #ffffff, #c8d1f4 100%);
      border-radius: 15rpx;
      box-shadow: 0px 0px 136rpx 0px #ffffff inset;
      margin: 0 auto;
      position: relative;
      padding-top: 202rpx;
      .invite-intro_box {
        padding-top: 25rpx;
        width: 673rpx;
        height: 219rpx;
        background: linear-gradient(180deg, #5d94ff, #58f5ff 100%);
        position: absolute;
        top: -71rpx;
        left: 0;
        right: 0;
        margin: 0 auto;

        .title {
          font-size: 54rpx;
          font-weight: 500;
          text-align: center;
          color: #ffffff;
        }
        .tip-box {
          width: 425rpx;
          height: 52rpx;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 90rpx;
          line-height: 52rpx;
          text-align: center;
          margin: 0 auto;
          margin-top: 15rpx;
          font-size: 23rpx;
          font-weight: 500;
          color: #6147ff;
        }
      }
      .tobe-member_list {
        display: flex;
        justify-content: center;
        column-gap: 54rpx;
        .member-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .member-avatar {
            display: flex;
            justify-content: center;
            line-height: 85rpx;
            width: 108rpx;
            height: 108rpx;
            background-color: #ffffff;
            border: 4rpx dashed #6147ff;
            border-radius: 50%;
            color: #6147ff;
            font-size: 96rpx;
            font-weight: 500;
          }
          .member-name {
            font-size: 23rpx;
            font-weight: 400;
            color: #847870;
            margin-top: 20rpx;
          }
        }
      }
      .create-team_btn {
        margin: 0 auto;
        margin-top: 45rpx;
        width: 637rpx;
        height: 108rpx;
        background: linear-gradient(270deg, #864ce4 0%, #272fd9);
        border: 8rpx solid #fff;
        border-radius: 103.85px;
        box-shadow: 0px 8rpx 23rpx 0px rgba(130, 53, 228, 0.3),
          0px 8rpx 42rpx 0px #ffffff inset;
        box-sizing: content-box;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 38rpx;
        font-weight: 500;
        color: #ffffff;
        column-gap: 15rpx;
        .add-icon {
          width: 38rpx;
          height: 38rpx;
          margin-right: 8rpx;
        }
      }
    }
    .invite-after {
      margin-top: 50rpx;
      .after-tit {
        text-align: center;
        font-size: 31rpx;
        font-weight: 500;
        color: #6147ff;
      }
      .task-list {
        margin-top: 30rpx;
        .list-item_card {
          margin: 0 auto;
          margin-bottom: 23rpx;
          width: 712rpx;
          height: 154rpx;
          background: linear-gradient(180deg, #ffffff, #c8d1f4 100%);
          border: 2rpx solid #96b3ff;
          border-radius: 15rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 21rpx 0 23rpx;
          .left {
            display: flex;
            align-items: center;
            .task-icon {
              width: 96rpx;
              height: 104rpx;
            }
            .left-ct {
              margin-left: 23rpx;
              .title {
                font-size: 35rpx;
                font-weight: 500;
                color: #343ad3;
              }
              .desc {
                font-size: 27rpx;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.6);
                margin-top: 25rpx;
              }
            }
          }
          .attend-btn {
            text-align: center;
            line-height: 50rpx;
            width: 138rpx;
            height: 50rpx;
            background: linear-gradient(270deg, #864ce4 0%, #272fd9);
            border-radius: 40rpx;
            box-shadow: 0px 0px 8rpx 0px #ffffff inset;
            font-size: 23rpx;
            font-weight: 500;
            color: #ffffff;
          }
          &:nth-child(2) {
            .left {
              .task-icon {
                width: 90rpx;
                height: 90rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>
